@import 'variable';

.layout-steps {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  margin-bottom: 12px;
}

.layout-steps-item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  flex: 1;
  overflow: hidden;
  margin-right: 16px;

  &:last-child {
    flex: none;
  }
  &:last-child .layout-steps-tail,
  &:last-child .layout-steps-item-title:after {
    display: none !important;
  }
  .layout-steps-item-content,
  .layout-steps-item-icon {
    display: inline-block;
    vertical-align: top;
  }
  .layout-steps-item-icon {
    border: 1px solid rgba(0, 0, 0, 0.25);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 32px;
    font-size: 16px;
    margin-right: 8px;
    -webkit-transition: background-color 0.3s, border-color 0.3s;
    transition: background-color 0.3s, border-color 0.3s;
  }

  .layout-steps-item-content {
    .layout-steps-item-title {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
      display: inline-block;
      padding-right: 16px;
      position: relative;
      line-height: 32px;
      &:after {
        content: '';
        height: 1px;
        width: 9999px;
        background: #e8e8e8;
        display: block;
        position: absolute;
        top: 16px;
        left: 100%;
      }
    }
    .layout-steps-item-description {
      max-width: 140px;
      color: $color-gray;
    }
  }
}

.layout-steps-item-process {
  .layout-steps-item-title {
    color: $color-black !important;
  }
  .layout-steps-item-description {
    color: $color-dark-gray !important;
  }
  .layout-steps-item-icon {
    border-color: $color-primary !important;
    color: white;
    background-color: $color-primary;
  }
}

.layout-steps-item-finish {
  .layout-steps-item-title {
    color: $color-gray !important;
    &:after {
      background-color: $color-primary !important;
    }
  }
  .layout-steps-item-icon {
    border-color: $color-primary !important;
    color: $color-primary !important;
  }
}

.layout-steps-item-wait {
  .layout-steps-item-title {
    color: $color-disable-gray !important;
  }
  .layout-steps-item-description {
    color: $color-disable-gray !important;
  }
  .layout-steps-item-icon {
    color: $color-disable-gray !important;
  }
}

.layout-steps-from {
  max-width: 500px;
  margin: 32px auto 0;
}
